<template>
  <div class="annual-mediation-data">
    <div class="tab-block">
      <div class="tab-item" @click="tabActive=0" :class="tabActive===0?'active':''">近三年接处警数</div>
      <div class="tab-item" @click="tabActive=1" :class="tabActive===1?'active':''">刑事发案</div>
      <div class="tab-item" @click="tabActive=2" :class="tabActive===2?'active':''">治安发案</div>
      <div class="tab-item" @click="tabActive=3" :class="tabActive===3?'active':''">电诈发案</div>
    </div>
    <div class="chart" id="annualMediationDataLine"></div>
    <div class="desc">
      <div class="text">{{sourceData.desc.text}}</div>
      <div class="value">{{sourceData.desc.value}}</div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'AnnualMediationData',
  data(){
    return{
      tabActive:0,
      source:[
        {
          desc:{
            text:'接处警总数下降',
            value:'64.5%'
          },
          data:[
            {name:'2022年',value:636},
            {name:'2023年',value:579},
            {name:'2024年',value:226},
          ]
        },
        {
          desc:{
            text:'刑事发案下降',
            value:'71.4%'
          },
          data:[
            {name:'2022年',value:28},
            {name:'2023年',value:15},
            {name:'2024年',value:8},
          ]
        },
        {
          desc:{
            text:'治安发案下降',
            value:'20.3%'
          },
          data:[
            {name:'2022年',value:64},
            {name:'2023年',value:54},
            {name:'2024年',value:51},
          ]
        },
        {
          desc:{
            text:'电诈发案下降',
            value:'20.3%'
          },
          data:[
            {name:'2022年',value:18},
            {name:'2023年',value:16},
            {name:'2024年',value:13},
          ]
        }
      ],
      chart:null
    }
  },
  watch:{
    tabActive:{
      immediate:true,
      handler(){
        this.$nextTick(()=>{
          this.initChart()
        })
      }
    }
  },
  computed:{
    sourceData(){
      return this.source[this.tabActive]
    }
  },
  methods:{
    initChart(){
      if(!this.chart){
        this.chart = echarts.init(document.getElementById('annualMediationDataLine'))
      }
      const option={
        tooltip: {
          trigger: 'axis',
        },
        xAxis:{
          type:'category',
          boundaryGap: false,
          data:this.sourceData.data.map(item=>item.name),
          axisLabel:{
            color:'#fff'
          },
          axisTick:{
            show:false
          },
          axisLine:{
            show:true,
            lineStyle:{
              color:'#0F4789'
            }
          }
        },
        grid:{
          left:0,
          top:20,
          right:20,
          bottom:10,
          containLabel:true
        },
        yAxis:{
          type:'value',
          axisLabel:{
            color:'#fff'
          },
          splitLine:{
            show:true,
            lineStyle:{
              color:'rgba(77,89,103,0.5)',
              type:'dashed'
            }
          }
        },
        color:['#FBC102'],
        series:[
          {
            type:'line',
            data:this.sourceData.data.map(item=>item.value),
            smooth:true,
            areaStyle:{
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 从上到下渐变
                  [
                    { offset: 0, color: 'rgba(251,193,2,0.8)' },
                    { offset: 1, color: 'rgba(251,193,2,0.1)' }
                  ]
              )
            }
          }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>
<style scoped lang="scss">
.annual-mediation-data{
  width: 100%;
  height: 100%;
  .tab-block{
    width: 100%;
    display: flex;
    justify-content: space-between;
    .tab-item{
      width: calc(100%/4 - 10px);
      height: 33px;
      border-radius: 5px;
      border: 1px solid #185F8D;
      color: #fff;
      cursor: pointer;
      background: #021226;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      &.active{
        background: #06213B;
        color: #32B4FF;
        border-color: #32B4FF;
      }
    }
  }
  .chart{
    width: 100%;
    height: calc(100% - 40px - 33px);
  }
  .desc{
    width: 100%;
    height: 40px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    .text{
      color: #fff;
      margin-right: 10px;
      font-size: 14px;
    }
    .value{
      font-family: 冷酷体;
      color: #32B4FF;
      font-size: 26px;
    }
  }
}
</style>
